<script setup lang="ts">
  import { ref, defineEmits } from 'vue';
  import { queryInstStations2 } from '@/api/structure-management/station';
  import { usePaginationTable } from '@/hooks/arco/usePaginationTable';
  import ListSelect from '@/components/list-select/index.vue';
  import { queryElderArchives } from '@/api/customerManagement/profile';
  import ListView from '@/components/list-view/index.vue'; // 添加导入

  const emit = defineEmits(['next']);

  const checkElder = ref();
  const checkStation = ref();

  const pageTable = usePaginationTable({
    apiFun: queryInstStations2,
  });

  const elderTable = usePaginationTable({
    immediate: false,
    apiFun: queryElderArchives,
    getQueryParams() {
      return {
        stationId: checkStation.value,
      };
    },
  });

  const onNext = () => {
    if (!checkElder.value) {
      // 可以添加提示让用户选择老人
      emit('next', false);
      return;
    }
    emit('next', {
      key: 'elderInfo',
      value: {
        elderId: checkElder.value,
        stationId: checkStation.value,
      },
    });
  };

  const onItemCheck = (value: any) => {
    checkElder.value = null;
    checkStation.value = value.id;
    elderTable.reload();
    onNext();
  };

  const onElderClick = (value: any) => {
    checkElder.value = value.elderId;
    onNext();
  };
</script>

<template>
  <div class="flex pt-[20px] gap-[10px] flex-1">
    <div class="w-[300px]">
      <list-view v-slot="{ data }" v-bind="pageTable.bindProps">
        <ListSelect :data="data" label-prop="name" @change="onItemCheck" />
      </list-view>
    </div>
    <a-divider direction="vertical" class="h-full"></a-divider>

    <list-view v-slot="{ data }" v-bind="elderTable.bindProps">
      <div class="flex-1 flex flex-wrap gap-[10px] pt-[10px]">
        <a-card
          v-for="(item, index) in data"
          :key="index"
          class="card-demo"
          :class="{
            'card-demo-checked': checkElder === item.elderId,
          }"
          style="height: fit-content"
          hoverable
          @click="onElderClick(item)"
        >
          <div class="flex flex-col">
            <div class="flex justify-between">
              <span>{{ item.elderName }}</span>
              <span>已签约</span>
            </div>
            <span>{{ item.gender }} {{ item.age }}岁</span>
            <span>{{ item.stationName }}</span>
          </div>
        </a-card>
      </div>
    </list-view>
  </div>
</template>

<style lang="less" scoped>
  .card-demo {
    width: 260px;
    transition-property: all;
    cursor: pointer;
    margin-bottom: 0;
  }
  .card-demo-checked {
    border: 1px solid #1677ff;
  }
  .card-demo:hover {
    transform: translateY(-4px);
  }
</style>
